import React from 'react'
import './index.less'
import SubTitle from 'pages/student_center/components/SubTitle'
import { Icon } from 'antd'
import zoom2xImg from '../../images/student/zoom2x.png';
import chrome2xImg from '../../images/student/chrome2x.png';
import ShowPdfModal from '../ShowPdfModal';
/**
 * theme
 * dark, light
 */
export default class HelpCenter extends React.Component {
  state ={
    showPdfModal: false
  }
  handleCloseShowPdfModal = () => {
    this.setState({
      showPdfModal: false
    })
  }
  handleShowPdfModal = () => {
    this.setState({
      showPdfModal: true
    })
  }
  render(){
    const { theme='light' } = this.props
    return (
      <div className={`help-center-${theme}`}>
        {
          this.state.showPdfModal ? <ShowPdfModal handleClose={this.handleCloseShowPdfModal}/> : null
        }
        <div className="help-center-top">
          <h2>帮助中心</h2>
          <p><i className="tel"></i><span>400-019-2516</span></p>
          <p><i className="email"></i><span>contact@zilongshu.com</span></p>
        </div>
        <div>
          <SubTitle title="上课指南" />
          <p className="btn">
            <span onClick={this.handleShowPdfModal}>PC/PAD</span>
            <span>官微</span>
          </p>
        </div>
        <div className="question-list">
          <SubTitle title="常见问题" />
          <a href="/#/student_center/frequently_asked_questions/layout/FAQ" className="more">更多<Icon type="right" /></a>
          <div>
            <p>1、首次上课如果提示下载...</p>
            <span className="span1">在线直播课程选用的是 zoom 直播系统，这是全世界最领...</span>
            <p>2、上课时无法进入教室该...</p>
            <span>对于直播课程，建议学员在开始上课前十分钟点击“上课”...</span>
          </div>
        </div>
        <div className="tool-list">
          <SubTitle title="工具下载" />
          <div>
            <p>
              <img src={chrome2xImg} />
              <span onClick={() => {
                window.open(`${window.location.protocol}//${window.location.hostname}/tools/download/ChromeSetup.exe`)
              }}>下载</span>
            </p>
            <p>
              <img src={zoom2xImg} />
              <span onClick={() => {
                window.open(`${window.location.protocol}//${window.location.hostname}/tools/download/ZoomInstaller.exe`);
              }}>下载</span>
            </p>
            {/* <p>
              <img src="http://placehold.it/60x60.png" />
              <span>下载</span>
            </p>
            <p>
              <img src="http://placehold.it/60x60.png" />
              <span>下载</span>
            </p> */}
          </div>
        </div>
      </div>
    )
  }

}